<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page isELIgnored="false" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <script src="<%=path%>/static/js/mui.min.js"></script>
    <script src="<%=path%>/static/js/mui.picker.min.js"></script>
    <script src="<%=path%>/static/js/mui.dtpicker.js"></script>
    <script src="<%=path%>/static/js/jquery.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="<%=path%>/static/js/leave.js" type="text/javascript" charset="UTF-8"></script>
    <link href="<%=path%>/static/css/mui.css" rel="stylesheet"/>
    <link href="<%=path%>/static/css/leave.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/mui.dtpicker.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/mui.picker.min.css"/>
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
    <!-- header：当前在哪个页面 -->
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">学生请假</h1>
        </header>
</head>
<body>
<!-- 标题开始 -->
<div class="mui-content">
    <h1 class="mui-title">学生出入校申请(<c:if test="${data['type'] ==1}">市内一天</c:if><c:if test="${data['type'] ==2}">市内多天或市外</c:if>  )</h1>
</div>
<!-- 标题结束 -->
<!-- 当前状态开始 -->
<div class="mui-content">
    <!-- 栅格系统，最宽为12列，超过12列则另起1行 -->
    <!-- 第一行开始 -->
    <div class="mui-row">
        <!-- ps：css中最小宽度（min-width）：400px会导致网页另起一行，所以最小宽度修改为100px -->
        <!-- 一个字段占了6列 -->
        <div class="mui-col-sm-6 mui-col-xs-12">
            <li class="mui-table-view-cell">
                <a>
                    当前处理人：${data['name']}
                </a>
            </li>
        </div>
        <div class="mui-col-sm-6 mui-col-xs-12">
            <li class="mui-table-view-cell">
                <a>
                    申请时间：<span id="currentTime">${currentTime}</span>
                </a>
            </li>
        </div>
    </div>

    <!-- 第二行开始 -->
    <!-- 栅格系统，最宽为12列，超过12列则另起1行 -->
    <div class="mui-row">
        <!-- ps：css中最小宽度（min-width）：400px会导致网页另起一行，所以最小宽度修改为100px -->
        <!-- 一个字段占了6列 -->
        <div class="mui-col-sm-6 mui-col-xs-12">
            <li class="mui-table-view-cell">
                <a>
                    当前状态：<span>${requestScope.currentStatus}</span>
                </a>
            </li>
        </div>
        <div class="mui-col-sm-6 mui-col-xs-12">
            <li class="mui-table-view-cell">
                <a>
                    申请者：${data['name']}
                </a>
            </li>
        </div>
    </div>
</div>
<!-- 当前状态结束 -->
<c:if test="${data['status']==2}">
    <c:choose>
        <c:when test="${requestScope.enable}">
            <p style="color: green; font-size: 25px; text-align: center;">允许通行</p>
        </c:when>
        <c:otherwise>
            <p style="color: red; font-size: 25px; text-align: center;">禁止通行</p>
        </c:otherwise>
    </c:choose>
    <p style="text-align: center; color: red; font-size: 18px;">当前时间：<span id="nowtime" style="color: red;"></span> </p>
</c:if>
<!-- 表单开始 -->
<div class="mui-content">
    <%--	action="<%=request.getContextPath()%>/submitLeaveInfo"--%>
    <form class="mui-input-group" method="post" id="leaveForm" action="<%=path%>/leave/submit">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-collapse mui-active">
                <a class="mui-navigate-right" href="#">个人基本信息</a>
                <!-- 个人信息表单开始 -->
                <div class="mui-collapse-content">
                    <c:if test="${data['status']==2}">
                        <input type="hidden" name="act" value="back">
                        <input type="hidden" name="id" value="${data['id']}">
                    </c:if>
                    <input type="hidden" name="type" value="${data['type']}">
                    <input type="hidden" name="studentId" value="${data['id']}">
                    <div class="mui-input-row">
                        <label>录取号</label>
                        <input type="text" class="mui-input-clear" name="admitId" value="${data['admitId']}"
                               placeholder="请输入录取号">
                    </div>
                    <div class="mui-input-row">
                        <label>学号</label>
                        <input type="text" class="mui-input-clear" name="studentNum" value="${data['num']}"
                               placeholder="请输入学号">
                    </div>
                    <div class="mui-input-row">
                        <label>姓名</label>
                        <input type="text" class="mui-input-clear" name="name" value="${data['name']}"
                               placeholder="请输入姓名">
                    </div>
                    <div class="mui-input-row">
                        <label>性别</label>
                        <input type="text" class="mui-input-clear" name="sex"
                               value="<c:if test="${data['sex'] ==1}">男</c:if><c:if test="${data['sex'] ==2}">女</c:if>"
                               placeholder="请输入性别">
                    </div>
                    <div class="mui-input-row">
                        <label>学院</label>
                        <input type="hidden" name="collegeID" value="">
                        <input type="text" class="mui-input-clear" name="collegeName"
                               value="${data['departmentName']}" placeholder="请输入学院" readonly="readonly">
                    </div>
                    <div class="mui-input-row">
                        <label>寝室号</label>
                        <input type="text" class="mui-input-clear" name="dormitoryNo"
                               value="${data['dormitory']}" placeholder="请输入寝室号">
                    </div>
                </div>

            </li>
        </ul>
        <!-- 折叠面板结束 -->
        <div class="mui-input-row">
            <label>出行时间</label>
            <input  class="form-control p5 departureDate" placeholder="出行时间"
                   name="beginTime1" runat="server" readonly="readonly" value="${data['begintime']}"/>
        </div>
        <div class="mui-input-row">
            <label>结束时间</label>
            <input  class="form-control p5 departureDate" placeholder="结束时间"
                   name="endTime1" runat="server" readonly="readonly" value="${data['endtime']}"/>
        </div>
        <!-- 备注 -->
        <div class="mui-input-row">
            <label>外出事由</label>
                <textarea id="textarea" rows="5" name="reason" placeholder="请输入外出事由">${data['reason']}</textarea>
        </div>


        <c:if test="${requestScope.currentStatus.equals('学生申请')}">
            <div class="mui-button-row">
                <button type="submit" data-loading-text="提交中" class="mui-btn mui-btn-block mui-btn-primary">提交</button>
            </div>
        </c:if>
        <c:if test="${requestScope.data['status']==2}">
            <div class="mui-button-row">
                <button type="submit" data-loading-text="提交中" class="mui-btn mui-btn-block mui-btn-primary">申请销假</button>
            </div>
        </c:if>
    </form>
</div>
</body>

<script>
    /*	//页面初始之后 执行的事件
        $(document).ready(function() {
            show_newTime();
        });

        //当前时间
        function show_newTime() {
            //var time = new Date(new_time).getDate();
            var objD = new Date(); //系统时间
            var yy = objD.getYear();
            if (yy < 1900) yy = yy + 1900;
            var MM = objD.getMonth() + 1;
            var dd = objD.getDate();
            var hh = objD.getHours();
            hh = hh < 10 ? ("0" + hh) : hh;
            var mm = objD.getMinutes();
            mm = mm < 10 ? ("0" + mm) : mm;
            var ww = objD.getDay();
            var str = yy + "-" + MM + "-" + dd + " " + " " + hh + ":" + mm;

            $("#new_time").innerHTML = str;
            document.getElementById("new_time").value = str;
            document.getElementById("currentTime").innerText = str;
            console.log(str);
        };*/
    //datepicker
    (function ($, doc) {
        $.init();
        $.ready(function () {

            var dtpicker = new mui.DtPicker({

                type: "datetime", //设置日历初始视图模式
                beginDate: new Date(2021, 00, 01), //设置开始日期

                endDate: new Date(2025, 12, 31), //设置结束日期
                labels: ['年', '月', '日', '时', '分'], //设置默认标签区域提示语
            });
            $(document).on('click', ".departureDate", function (event) {
                var _this = this;
                dtpicker.show(function (e) {

                    console.log(e);
                    _this.value = e.text;
                }, false)
            })
        });
    })(mui, document);
</script>
<script>
    //页面加载调用
    window.onload=function(){
        //每1秒刷新时间
        setInterval("NowTime()",100);
    }
    function NowTime(){
        //获取年月日
        var time=new Date();
        var year=time.getFullYear();
        var month=time.getMonth()+1;
        var day=time.getDate();

        //获取时分秒
        var h=time.getHours();
        var m=time.getMinutes();
        var s=time.getSeconds();
        var ms = time.getMilliseconds();

        //检查是否小于10
        h=check(h);
        m=check(m);
        s=check(s);
        document.getElementById("nowtime").innerHTML=+year+"-"+month+"-"+day+"  "+h+":"+m+":"+s+":"+ms;
    }
    //时间数字小于10，则在之前加个“0”补位。
    function check(i){
        //方法一，用三元运算符
        var num;
        i<10?num="0"+i:num=i;
        return num;

        //方法二，if语句判断
        //if(i<10){
        //    i="0"+i;
        //}
        //return i;
    }
</script>
</html>
